
/**
 * 总结:不要直接修改状态的值，而是基于当前状态创建新的状态值
 * 
 */
import React from "react"
class Counter extends React.Component {
  // 1.定义组件状态
  state = {
    // 在这里可以定义各种属性 全都是当前组件的状态
    count: 0,
    list: [1, 2, 3],
    person: {
      name: 'jack',
      age: 22
    }
  }
  // 事件回调函数
  changeState = () => {

    // 数组删除--filter
    this.setState({
      list: this.state.list.filter(item => item !== 2)
    })
    this.setState({
      count: this.state.count + 1,
      list: [...this.state.list, 4],
      person: {
        ...this.state.person,
        name: 'rose'
      }
    })
  }
  render () {
    // 2.使用状态
    return (
      <div>
        <div>{this.state.count}</div>
        <ul>
          {this.state.list.map((item, index) => <li key={index}>{item}</li>)}
        </ul>
        <div>{this.state.person.name}</div>
        <button onClick={this.changeState}>click</button>
      </div>
    )
  }
}

function App () {
  return (
    <div className="App">
      <Counter></Counter>
    </div>
  )
}

export default App
